<template>
 <el-container style="height: 100%">
    <el-header>
      <h1>Neusoft&nbsp;&nbsp;东软体检报告管理系统</h1>
      <p>医生：</p>
    </el-header>
    <el-container>
      <el-aside width="260px">
        <h4>体检用户查询</h4>
        <el-form ref="formRef" label-width="auto">
          <el-form-item label="手机号码">
            <el-input
              placeholder="手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              placeholder="姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group>
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="套餐类型">
            <el-select placeholder="套餐类型">
              <el-option></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="体检日期">
            <el-date-picker
              type="date"
              placeholder="体检日期"
              style="width: 100%"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="是否归档">
            <el-radio-group>
              <el-radio border label="1">未归档</el-radio>
              <el-radio border label="2">已归档</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="warning">重置</el-button>
          </el-form-item>
        </el-form>
      </el-aside>
      <el-main>
        <el-table style="width: 100%">
          <el-table-column prop="" label="预约编号" width="120" />
          <el-table-column prop="" label="手机号码" width="140" />
          <el-table-column prop="" label="真实姓名" width="120" />
          <el-table-column label="性别" width="60">
            <template #default="">
              <span></span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="套餐类型" />
          <el-table-column prop="" label="体检医院" width="220" />
          <el-table-column prop="" label="体检日期" />
          <el-table-column label="操作" width="120">
            <template #default="">
              <el-button type="text" size="small"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="10"
          :page-size="5"
          style="margin-top: 20px"
          @current-change="currentChange"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getSessionStorage } from "../common.js";
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8088/tijiancms/";

export default {
  setup() {
    const router = useRouter();

    const state = reactive({
     
    });

    

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1c51a3;
}

.el-header h1 {
  font-size: 22px;
  font-weight: 700;
}
.el-header p {
  font-size: 16px;
}

.el-aside {
  background-color: #d3dce6;
  box-sizing: border-box;
  padding: 20px;
}
.el-aside h4 {
  color: #555;
  margin-bottom: 20px;
}

.el-main {
  background-color: #e9eef3;
}
</style>